<app-description value="A new full-featured web framework for enterprise TypeScript web applications"></app-description>
<dw-header/>
<div class="page">
    <div class="wrapper">
        <h1>The TypeScript Framework<br/>
            for Enterprise Scale</h1>
        <h3 class="text">
            High-quality TypeScript libraries and next-gen backend framework.<br/>
            Leverage TypeScript to the fullest, in completely new ways.
        </h3>
    </div>

    <main>
        <div class="separator1"></div>

        <div class="feature-framework">
            <h2>What is Deepkit Framework?</h2>

            <h3 class="text" style="margin: 50px auto;">
                Deepkit Framework is a NodeJS Framework written in and for Typescript focusing on enterprise scale web
                applications while also providing
                tools for the whole tech-stack including frontend.
                It is a set of reusable Typescript libraries that can be used standalone and a framework that brings
                them together.
            </h3>

            <p style="padding-bottom: 35px;">
                <a class="button big" routerLink="/documentation/framework">Learn more</a>
            </p>

            <div class="table scroll-small">
                <table>
                    <tbody>
                    <tr>
                        <td rowspan="2">
                            ORM
                            <p>
                                MySQL, PostgreSQL, SQLite, MongoDB
                            </p>
                        </td>
                        <td rowspan="2">Runtime Types</td>
                        <td>Validation</td>
                        <td style="width: 250px;" colspan="2">Reflection</td>
                    </tr>
                    <tr>
                        <td>Serialization</td>
                        <td colspan="2">Workflow Engine</td>
                    </tr>
                    <tr>
                        <td>HTTP Router</td>
                        <td style="background: transparent" rowspan="3" colspan="2">
                            <h2>Framework</h2>
                            <p class="feature-text">
                                A framework that brings aligned libraries together to
                                make web application development faster, more productive, and easier than ever.
                            </p>
                        </td>
                        <td colspan="2">Event System</td>
                    </tr>
                    <tr>
                        <td>Configuration</td>
                        <td>Broker</td>
                        <td>Modules</td>
                    </tr>
                    <tr>
                        <td>Profiler</td>
                        <td>Debugger</td>
                        <td>BSON</td>
                    </tr>
                    <tr>
                        <td>Template Engine</td>
                        <td colspan="2">Dependency Injection</td>
                        <td>RPC</td>
                        <td>CLI</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </main>

    <div class="major-leap">
        <div class="wrapper two-column">
            <div>
                <h2>Major Leap in Efficiency</h2>

                <p class="feature-text">
                    By using TypeScript for frontend and backend with a framework that fully utilises all advantages of
                    a single technology stack
                    and allowing you to share code like models, validations, business logic, it skyrockets your
                    performance enabling you to build
                    web applications much more robust and much faster.
                </p>

                <p class="feature-text">
                    By applying enterprise design patterns with the power of TypeScripts's type system
                    at runtime, you accelerate the development speed and increase quality dramatically.
                </p>

                <a class="button" routerLink="documentation/introduction">Learn more</a>
            </div>

            <div class="right">
                <img alt="Major Leap in Efficiency" src="/assets/images/leap-art.png" style="width: 360px;">
            </div>
        </div>
    </div>

    <main>
        <div class="two-column feature-with-code">
            <div>
                <h2>Runtime Types</h2>

                <p class="feature-text">
                    A revolutionary runtime type system for JavaScript, powered by TypeScript types.
                    Deepkit's type compiler makes it possible to use the whole TypeScript type system in any JavaScript
                    runtime
                    for the first time enabling completely new ways of writing data driven applications.
                </p>

                <p class="feature-text">
                    Define your types in powerful TypeScript expression without workarounds and use them as real values
                    in
                    frontend, API, database, documentation, and much more.
                </p>

                <a class="button" routerLink="documentation/runtime-types">Learn more</a>
            </div>
            <div class="code-box bla2">
                <highlight-code file="code/startpage-runtime-types.ts"/>
            </div>
        </div>

        <div class="two-column feature-with-code">
            <div>
                <h2>Validation and Serialization</h2>

                <p class="feature-text">
                    Run validation and serialization at runtime with the full power of TypeScript types, without making
                    any compromises
                    in expressiveness or performance.
                </p>

                <p class="feature-text">
                    With support for all TypeScript type expression, including generics, classes, interfaces, unions,
                    intersections, and more.
                    Feel the power of one of the most versatile type systems in the world in runtime.
                </p>

                <a class="button" routerLink="documentation/runtime-types/validation">Learn more</a>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-validation.ts"/>
            </div>
        </div>


        <div class="feature-block">
            <h2>HIGH PERFORMANCE</h2>

            <p class="feature-text">
                High performance in every fiber. From execution time to development time.
            </p>
            <p class="feature-text">
                We are committed to building a framework that utilizes the power of isomorphic TypeScript and an ecosystem of libraries that are perfectly
                optimized to work with each other to empower you to build applications faster than ever before.
            </p>

            <div class="banner-features">
                <div>
                    <h3>High Performance ORM</h3>
                    <div>
                        <performance-chart yAxis="ms / SQLite query 10k records">
                            <performance-entry title="Sequelize" [value]="58.716"></performance-entry>
                            <performance-entry title="MikroORM" [value]="42.840"></performance-entry>
                            <performance-entry title="TypeORM" [value]="24.262"></performance-entry>
                            <performance-entry title="Prisma" [value]="22.484"></performance-entry>
                            <performance-entry title="Deepkit ORM" [value]="7.444"></performance-entry>
                        </performance-chart>
                    </div>
                </div>

                <div>
                    <h3>Fastest MongoDB</h3>
                    <div>
                        <performance-chart yAxis="ms / MongoDB query 10k records">
                            <performance-entry title="Mongoose" [value]="82.571"></performance-entry>
                            <performance-entry title="MikroORM" [value]="72.434"></performance-entry>
                            <performance-entry title="Prisma" [value]="66.450"></performance-entry>
                            <performance-entry title="TypeORM" [value]="34.634"></performance-entry>
                            <performance-entry title="Raw MongoClient" [value]="25.900"></performance-entry>
                            <performance-entry title="Deepkit ORM" [value]="7.021"></performance-entry>
                        </performance-chart>
                    </div>
                </div>
            </div>
            <div class="wrapper benchmark-link">
                <a routerLink="/benchmarks">More information about our benchmarks</a>
            </div>
        </div>
    </main>

    <div class="feature-end-to-end feature-center color">
        <div class="wrapper">
            <h2>End to End Types</h2>

            <p class="feature-text">
                Define your data models with database and validation information once in TypeScript and share it with
                your whole stack
                without type checking performance penalties: Frontend, Transport, Message Broker, Micro-Service,
                Backend, Database — end to end.
            </p>

            <p class="feature-text">
                Don’t split types prematurely but derive when necessary and keep a single source of truth.
            </p>

            <a class="button" routerLink="documentation/runtime-types/types">Learn more</a>

            <div>
                <highlight-code file="code/startpage-endtoend.ts"/>
            </div>

            <img class="graph" alt="sections" src="/assets/images/end-to-end-code-bottom.svg"/>
        </div>
    </div>

    <main>
        <div class="two-column feature-with-code">
            <div>
                <h2>Dependency Injection</h2>

                <p class="feature-text">
                    One of the most powerful design pattern in enterprise software architecture — Dependency Injection.
                    Brought to a whole new level.
                </p>

                <p class="feature-text">
                    Type your services, listeners, controllers against abstractions and enjoy the power of a fully
                    auto-wiring
                    high-performance Dependency Injection Container.
                </p>
                <p class="feature-text">
                    With support for functions and parameter injection: HTTP routes, CLI commands, event listeners, and
                    more.
                </p>

                <a class="button" routerLink="documentation/dependency-injection">Learn more</a>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-di.ts"/>
            </div>
        </div>


        <div class="two-column feature-with-code">
            <div>
                <h2>HTTP Router</h2>

                <p class="feature-text">
                    Define HTTP routes as controller classes or functions and separate correctly with Dependency
                    Injection.
                </p>

                <p class="feature-text">
                    Define all inputs (query, header, path parameters, body) as well as dependencies in the arguments
                    and the router automatically deserialises and validates all incoming traffic.
                </p>

                <a class="button" routerLink="documentation/http">Learn more</a>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-http.ts"/>
            </div>
        </div>


        <div class="two-column feature-with-code">
            <div>
                <h2>Command Line Interface</h2>

                <p class="feature-text">
                    It has never been easier to write fully separated and validated CLI commands. Define the command
                    either as a function
                    or a class and define your command parameters and dependencies in the arguments.
                </p>

                <p class="feature-text">
                    Dependency injection as well as parameter deserialisation and validation happen automatically.
                </p>

                <a class="button" routerLink="documentation/cli">Learn more</a>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-cli.ts"/>
            </div>
        </div>
    </main>

    <div class="feature-center color">
        <div class="wrapper" style="max-width: 800px">
            <h2>Remote Procedure Call</h2>

            <p class="feature-text">
                The fastest way to connect your frontend with your backend or interconnect your micro-services using
                WebSockets
                or TCP with automatic serialisation, validation, error forwarding, fully typsafe interface, and
                streaming
                capabilities using RxJS — without code generation.
            </p>

            <a class="button" routerLink="documentation/rpc">Learn more</a>

            <highlight-code file="code/startpage-rpc.ts"/>

            <highlight-code file="code/startpage-rpc-client.ts"/>
        </div>
    </div>

    <main>

        <div class="two-column feature-with-code">
            <div>
                <h2>App Configuration</h2>

                <p class="feature-text">
                    Auto-loading typesafe application configuration with automatic deserialisation and validation.
                </p>

                <p class="feature-text">
                    Values can be directly injected into all your services from the Dependency Injection Container.
                </p>

                <a class="button" routerLink="documentation/framework/configuration">Learn more</a>

                <highlight-code file="code/startpage-config1.ts"/>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-config2.ts"/>
            </div>
        </div>

        <div class="two-column feature-with-code">
            <div>
                <h2>Template Engine</h2>

                <p class="feature-text">
                    Easy to use and safe template engine based on JSX with full access to the Dependency Injection
                    Container.
                </p>

                <p class="feature-text">
                    Compiled via a JIT compiler to native JavaScript functions for maximum performance.
                </p>

                <a class="button" routerLink="documentation/framework/template">Learn more</a>

                <highlight-code file="code/startpage-template1.ts"/>
            </div>
            <div class="code-box">
                <highlight-code file="code/startpage-template2.ts"/>
            </div>
        </div>

    </main>

    <div class="feature-center color">
        <div class="wrapper" style="max-width: 800px">
            <h2>TypeScript ORM</h2>

            <p class="feature-text">
                One of the fastest full-featured database ORM for TypeScript. An high-performance ORM for TypeScript
                with enterprise patterns
                Data Mapper, Unit Of Work, and Identity Map as well as migration capabilities, relation support,
                and easy to define entities — No code generator needed.
            </p>

            <a class="button" routerLink="documentation/orm">Learn more</a>

            <highlight-code file="code/startpage-orm.ts"/>
        </div>
    </div>

    <div class="app-product">
        <h2>Deepkit ORM Browser</h2>

        <p>
            Deepkit ORM Browser is a web application that allows you to browse your database schema, edit your data,
            see migration changes, and seed your database. Everything based on your TypeScript entity types.
        </p>

        <p>
            It is part of Framework Debugger but can also be used standalone.
        </p>

        <p>
            <a class="button big" routerLink="/library/orm-browser">Learn more</a>
        </p>

        <app-images>
            <app-image src="/assets/screenshots-orm-browser/content-editing.png"></app-image>
            <app-image src="/assets/screenshots-orm-browser/model-diagram.png"></app-image>
            <app-image src="/assets/screenshots-orm-browser/query.png"></app-image>
            <app-image src="/assets/screenshots-orm-browser/seed.png"></app-image>
        </app-images>
    </div>

    <div class="app-product">
        <h2>Deepkit API Console</h2>

        <p>
            Auto documentation of your HTTP and RPC API right in the browser showing all your
            routes, actions, parameters, return types, status codes, in TypeScript type syntax.
        </p>

        <p>
            Interactively explore and test your API with the API Console.
        </p>

        <p>
            It is part of Framework Debugger but can also be used standalone.
        </p>

        <p>
            <a class="button big" routerLink="/library/api-console">Learn more</a>
        </p>

        <app-images>
            <app-image src="/assets/screenshots/api-console-http-get.png"></app-image>
            <app-image src="/assets/screenshots/api-console-http-post.png"></app-image>
            <app-image src="/assets/screenshots/api-console-overview.png"></app-image>
            <app-image src="/assets/screenshots/api-console-overview-detail.png"></app-image>
            <app-image src="/assets/screenshots/api-console-overview-detail-get.png"></app-image>
        </app-images>
    </div>

    <div class="app-product">
        <h2>Deepkit Debugger</h2>

        <p>
            Deepkit Framework Debugger is a web application giving you insights into your application.
        </p>

        <p>
            Module hiarchy, configuration, APIs, database, profiler, and much more.
        </p>

        <p>
            <a class="button big" routerLink="/library/framework">Learn more</a>
        </p>

        <app-images>
            <app-image src="/assets/screenshots/debugger-http.png"></app-image>
            <app-image src="/assets/screenshots/debugger-modules.png"></app-image>
            <app-image src="/assets/screenshots-profiler/overview.png"></app-image>
            <app-image src="/assets/screenshots/debugger-configuration.png"></app-image>
            <app-image src="/assets/screenshots/debugger-api-http.png"></app-image>
        </app-images>
    </div>

    <main>
        <div class="feature-block">
            <div class="overline">NOW</div>
            <h2>LETS GO</h2>

            <p class="feature-text">
                Start now and get to know the new runtime type system in action.
            </p>

            <a class="button big" href="/documentation/app">Get started</a>
        </div>

    </main>
</div>
